<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .img {
            width: 300px;
            height: 300px;
        }

        .static {
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
            color: blue;
        }

        .a {
            background: fuchsia;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 5px solid yellowgreen;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 :data-title="title" :data-msg="msg">{{title}}</h2>
        <div v-if="false">
            <img :src="link" class="img" alt="">
            <div class="static a b c">1</div>
            <div class="static" :class="a">2</div>
            <div class="static" :class="{a:true,b:false,c:cflag}">2</div>
            <div class="static" :class="[isa,isb,'c']">4</div>
            <div class="static" style="background: aquamarine;border-radius: 50%;">5</div>
            <div class="static" :style="{background:'red',borderRadius:bors,border:'10px solid #ccc'}">6</div>
            <div class="static" :style="obj">7</div>
        </div>
        <div>
            <h2 v-if="seen">
                v-if 条件渲染 指令的表达式返回为真 才会真正的渲染
            </h2>
            <h2 v-else>
                表达式的值 为 false 则什么都不做 不会渲染DOM
            </h2>
            <button @click="seen=!seen">点击切换</button>
            <div v-if="toggle">
                <h1>你好</h1>
                <h1>你好</h1>
                <h1>你好</h1>
                <h1>你好</h1>
                <h1>你好</h1>
            </div>
            <img v-show="show" :src="link" class="img" alt="">
            <button @click="show=!show">点击切换</button>
            <div v-if="list.length>0">
                <div v-for="(item,index) in list" :key="index">
                    <h2 v-if="index%2==0">{{item}}-{{index}}</h2>
                </div>
            </div>
            <div v-if="user">
                <h2>用户信息</h2>
                <h2>username=={{user.username}}</h2>
                <h2>age=={{user.age}}</h2>
                <h2>hobby=={{user.hobby}}</h2>
            </div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            title: 'v-bind和v-if的使用',
            msg: 'are you ok',
            link: '../img/020AFBD2AF2816CBC6B217184D565317.jpg',
            a: 'a b',
            cflag: true,
            isa: 'a',
            isa: 'b',
            bors: '50%',
            obj: {
                background: 'pink',
                borderRadius: '50%'
            },
            seen: true,
            toggle: true,
            show: true,
            list: ['111', '222', '333', '444'],
            user: null
        },
        mounted() {
            document.getElementsByTagName('title')[0].innerHTML = this.title;
            setTimeout(() => {
                this.user = {
                    username: 'z',
                    age: 20,
                    hobby: 'read Book'
                }
            }, 1500)
        },
    }).$mount('#app')
</script>

<!-- 
        动态的class 和  style 切换   
        v-bind 用于 class 和 style 时，Vue.js 做了专门的增强   除了字符串之外，还可以是对象或数组

        v-bind

        v-bind:class 

        :class = " "  {}  []

        v-bind:style 

        
        :style = {}  [{}]

        :style="{display:current==i?'block':'none'}
     -->

<!-- 
        v-if   条件渲染   指令的表达式返回为真 才会真正的渲染 

        表达式的值 为 false 则什么都不做 不会渲染DOM 

        template 包裹的空元素    没有任何效果


        v-else 必须 与它最近的 v-if 匹配 


        v-show   指令通过 display 来控制显示和隐藏 

        带有 v-show的元素 会始终渲染到DOM  只是简单的样式切换 



        v-if vs v-show 

        v-if 是“真正”的条件渲染  v-if 也是惰性的   如果在初始渲染时条件为假 则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 

        v-show  不管条件为真为假 都会去渲染DOM  简单地基于 CSS 进行切换    


        使用场景 (使用频率)

        v-if 有更高的切换开销  在切换条件很少改变的情况下  推荐使用 v-if   v-if 现实初始化内部的数据变量 

        v-show 有更高的初始渲染开销  需要频繁的切换的情况下 推荐使用 v-show 


        v-if 与 v-for 一起使用 (不推荐)

        如果一定要用  
   
        v-for 比 v-if 有更高的优先级 

        v-if 写在 v-for(循环) 的外面 


        异步数据 带来的警告问题 
        控制  v-if 
        错误   Cannot read property 'xxxxxx' of null"   变量的属性为 null 

        TypeError: Cannot read property 'username' of null
        TypeError: Cannot read property 'username' of undefined  

        v-if 
     -->

</html>